/*====================================================
    header styles
====================================================*/
header {
  width: 100%;
  height: auto;
  background-color: @themeBg;
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
}
nav {
	width: 100%;
	height: @navHeight;
	line-height: @navLineHeight;
	text-align: center;
	// overflow: hidden;
  	// logo
	.logo {
		float: left;
		margin-left: 30px;
		display: inline-block;
		img {
			width: 26px;
			height:26px;
		}
		b {
			margin-left: 6px;
		    vertical-align: -4px;
		    font-size: 14px;
		    font-weight: bold;
		    letter-spacing: 2px;
			color: #fff;
		}
	}
	// 导航
	ul {
			display: inline-block;
		li {
			display: inline-block;
			padding: 0px 30px;
			a {
				color: @navColor;
				font-size: 14px;
				font-weight: bold;
				letter-spacing: 1px;
			}
		}
	}
	// 右侧内容区域
	.nav-right {
		position: relative;
		float: right;
		margin-right: 5%;
	}
	// 搜索容器
	.search {
		width: 38px;
		height: @navHeight;
		line-height: @navHeight;
		color: @navColor;
    	margin-right: 22px;
    	font-size: 13px;
    	position: absolute;
    	left: -64px;
		i {
			vertical-align: -2px;
		}
		.search-main {
			width: 222px;
			height: @navHeight;
			position: absolute;
			right: 28px;
			display: inline-block;
			// animation: searchwidth 2s;
			// -moz-animation: searchwidth 2s;	/* Firefox */
			// -webkit-animation: searchwidth 2s;	/* Safari 和 Chrome */
			// -o-animation: searchwidth 2s;	/* Opera */
			input {
				background: @themeBg;
				border: none;
				height: 20px;
				line-height: 20px;
				color: #fff;
				outline: none;
				font-size: 13px;
			}
			.searchTxt {
				width: 60px;
				display: inline-block;
			}
		}
		.search-term {
			display: inline-block;
			position: relative;
			&:before {
				display: inline-block;
				content: "";
				width: 1px;
				height: 20px;
				background: #ec9292;
				vertical-align: -6px;				
			}
		}
		.search-menu {
			position: absolute;
			width: 70px;
			height: auto;
			background: @themeBg;
			color: #fff;
			top: 35px;
			ul {
				margin: 0;
				padding: 0;
				width: 100%;
				li {
					display: block;
					padding: 2px 0;
					text-align: left;
					text-indent: 12px;
					a {
						color: @navColor;
						font-size: 13px;
						font-size
						&:hover {
							background: @navColor;
							color: @themeBg;
						}
					}
				}
			}			
		}
		.search-term:after {
			display: inline-block;
			content: "";
			width: 1px;
			height: 12px;
			background: #ec9292;
			vertical-align: -2px;
		}
	}
	.search:before, .search:after {
		display: inline-block;
		content: "";
		width: 1px;
		height: 20px;
		background: #ec9292;
		vertical-align: -6px;
	}
	.search:before { margin-right: 6px; }
	.search:after  { margin-left: 6px; }
  // 消息容器
  .news {
    float: left;
    height: @navHeight;
    line-height: @navHeight;
    color: @navColor;
    overflow: hidden;
    position: relative;
    i {
      vertical-align: -4px;
      font-size: 20px;
    }
  }
  .news.active:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background: #fff;
    top: 7px;
    right: 0px;
  }
	// 用户容器
	.user {
		float: left;
		margin-left: 20px;
		// 用户登录
		.user-login {
			height: @navHeight;
			line-height: @navHeight;
			color: @navColor;
			position: relative;
			i.user-icon {
				font-size: 28px;
				color: @navColor;
			}
			span {
				margin-left: 4px;
				vertical-align: 3px;
				font-weight: bold;
				font-size: 13px;
			}
		}
		.user-menu {
			position: absolute;
			width: 128px;
			height: auto;
			background: @themeColor;
			left: -52px;
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border: 1px solid @themeColor;
			ul {
				margin: 0;
				padding: 0;
				width: 100%;
				li {
					display: block;
					padding: 4px 2px;
					a {
						display: block;
						color: @navColor;
						font-size: 13px;
						&:hover {
							background: @navColor;
							color: @themeColor;
						}
					}
				}
			}
			&:before {
				content: "";
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 8px solid @themeColor;
				position: absolute;
				top: -6px;
				left: 50%;
				margin-left: -8px;
			}
		}
	}
  .search,.news,.user {
    cursor: pointer;
  }
}

// 头部菜单
.top-menu {
  margin-top: @navHeight;
	width: 100%;
	height: auto;
	line-height: 34px;
	overflow: hidden;
	background-color: #fff;
	-moz-box-shadow:0px 2px 5px #e0e0e0;
	-webkit-box-shadow:0px 2px 5px #e0e0e0;
	box-shadow:0px 2px 5px #e0e0e0;
	text-align: center;
	.menu-list {
		display: inline-block;
		li {
			display: inline-block;
			float: left;
			padding: 0px 20px;
			font-size: 13px;
			color: @themeColor;
			font-weight: bold;
		}
	}
}


// @keyframes searchwidth
// {
// from {width: 0px;}
// to {width: 220px;}
// }

// @-moz-keyframes myfirst /* Firefox */
// {
// from {width: 0px;}
// to {width: 220px;}
// }

// @-webkit-keyframes myfirst /* Safari and Chrome */
// {
// from {width: 0px;}
// to {width: 220px;}
// }

// @-o-keyframes myfirst /* Opera */
// {
// from {width: 0px;}
// to {width: 220px;}
// }